<template>
  <div class="header">
  	<div class="header-left">
  		<div class="iconfont back-icon">&#xe624;</div>
  	</div>
  	<div class="header-input"><span class="iconfont">&#xe632;</span>输入城市/景点/游玩主题</div>
  	<router-link to="/city">
    <div class="header-right">城市<span class="iconfont arrow-icon">&#xe673;</span></div>
  </router-link>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
 @import "~styles/varibles.styl"
.header
 display: flex
 line-height: $headerHeight
 background: $bgColor
 color: #fff
 .header-left
   width: .64rem
   float: left
   .back-icon
     text-align: center
     font-size: .4rem
 .header-input
   flex: 1
   height: .64rem
   line-height: .64rem
   text-align: left
   background: #fff
   padding-left: .2rem
   border-radius: .1rem
   margin-top: .12rem
   margin-left: .2rem
   color: #ccc
 .header-right
   width: 1.24rem
   float: right
   text-align: center
   color: #fff
   .arrow-icon
     font-size: .24rem
</style>
<!-- scope代表这段代码只在这个组件里有用 -->
<!-- @import代表在样式里引入其他表 -->
